@()(implicit request: play.api.mvc.RequestHeader)
@main("Search") {

	<style>

			.radio, .checkbox {
				position: relative;
				display: block;
				margin-top: 5px;
				margin-bottom: 10px;
			}

			.form-group {
				margin-top: 20px;
			}

	</style>

	<div class="row">
		<div class="form-group col-sm-12">
			<h2 class="page-heading"
			style="text-align: left;
				border-bottom: 5px solid #e9f3f4">Search</h2>
		</div>
	</div>

	<div class="row">

		<div class="col-sm-3">
			<div class="bs-docs-sidebar" role="complementary">
				<ul class="nav bs-docs-sidenav">
					<li class="active"><a href="#keyword" data-toggle="tab">Keyword Search</a></li>
					<li class=""><a href="#condition" data-toggle="tab">Advanced Filter</a></li>
				</ul>
			</div>
		</div>

		<div class="col-sm-8 tab-content myform" >

			<div class="tab-pane active" id="keyword">
				<form class="form-horizontal" method="get" id="keywordForm">
					<div class="form-group">
						<label class="control-label col-sm-2">Keyword:</label>
						<div class="col-sm-9">
							<textarea class="form-control" placeholder="Your gene symbols seperated by comma"
							rows="5" name="keyword"></textarea>
							<span class="help-block">
								e.g.,&nbsp;<a href="#" onclick="Search.showExample(this, 'keyword')"><em id="egGeneId">
								FGFR2,ERBB2,FGFR1,ETV4</em></a></span>
						</div>
					</div>

					<div class="form-group">
						<div class="actions col-sm-offset-3 col-sm-3">
							<button type="button" class="btn btn-primary" style="width: 90%;" id="search" onclick="Search.keywordSearch">
								Search</button>
						</div>
					</div>
				</form>
			</div>

			<div class="tab-pane " id="condition">
				<form class="registration-form form-horizontal" id="form" accept-charset="UTF-8">

					<div class="form-group">
						<label class="control-label col-sm-4">Junction type:</label>
						<div class="col-sm-7">
							<select class="form-control" name="junctionTypes[]" style="width: 100%">
							</select>
						</div>
					</div>

					<div class="form-group">
						<label class="control-label col-sm-4"> Annotation:</label>
						<div class="col-sm-7">
							<select class="form-control" name="annotations[]" style="width: 100%">
							</select>
						</div>
					</div>

					<div class="form-group">
						<label class="control-label col-sm-4">Tumor specific types:</label>
						<div class="col-sm-7">
							<select class="form-control" name="tumorTypes[]" style="width: 100%">
							</select>
						</div>
					</div>

					<div class="form-group">
						<label class="control-label col-sm-4">Chromosome:</label>
						<div class="col-sm-5">
							<select class="form-control" name="chr" style="width: 100%">
							</select>
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-sm-4">Start Location:</label>
						<div class="col-sm-5">
							<input class="form-control" type="text" name="start" placeholder="Start position"
							id='start' />
						</div>
						<label class='control-label'>
							e.g., <a href="#" onclick="Search.showExample(this, 'start')"><em id='egStart'>
							1456789</em></a></label>
					</div>
					<div class="form-group">
						<label class="control-label col-sm-4">End Location:</label>
						<div class="col-sm-5">
							<input class="form-control" type="text" name="end" placeholder="End position"
							id='end' />
						</div>
						<label class='control-label'>
							e.g., <a href="#" onclick="Search.showExample(this, 'end')"><em id='egEnd'>
							1799799</em></a></label>
					</div>

					<div class="form-group">
						<div class="actions col-sm-offset-4 col-sm-3">
							<button type="button" class="btn btn-primary" style="width: 90%;" id="search" onclick="Search.myRun">
								Search</button>
						</div>
					</div>

					<div style="" class="col-sm-offset-2">
						<p><span style="font-weight: bold">Warning:</span>
							Search result only show top <span class="text-warning">50</span>!</p>
					</div>

				</form>
			</div>

		</div>

	</div>

	<hr>
	<div id="content" style="display: none" >

		<label>Select the columns to display:</label>
		<div id="checkbox" class="checkbox"></div>

		<table class="display table table-bordered" id="table" data-pagination="true"
		data-toolbar="#toolbar" data-page-list="[10, 25, 50, 100]" data-multiple-search="true"
		style="word-wrap: break-word;">
			<thead>

			</thead>
		</table>


	</div>


	<script>
			$(function () {
				Search.init
			})
	</script>


}
